<template>
	<div class="importFile">
		<div class="title">
			<button @click="delFile">删除</button>
			<input id="import" type="file" accept=".xls,.xlsx" @change="importFile" />
			<div id="sheet">
				导入第 <input v-model="sheetIndex" @change="changeIndex"></input> 个罐表文件
			</div>
			<p>修改文件后请删除文件重新导入，修改序号不需要重新导入</p>
		</div>
		<div class="prompt" v-for="(item,index) in promptMsg" :key="index">
			{{item}}
		</div>
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖
	export default {
		data() {
			return {
				files: null,
				uploadFileName: "",
				allData: [],
				tableArray: [], //要向服务器上传的二维数组，纯数字
				promptMsg: [],
				tankMeterPoints: 0,
				sheetIndex: 1, //要导入第几个表
				preHeight: 0,
				preVolume: 0,
				D_valueH: 0,
				D_valueV: 0,
				availableFlag: true
			}
		},
		methods: {
			/**
			 * 导入罐表 | 数据初始化
			 * */
			initData() {
				this.allData.length = 0;
				this.tableArray.length = 0;
				this.promptMsg.length = 0;
			},
			importFile(e) {
				var that = this;
				that.initData();

				that.files = e.target.files;
				that.uploadFileName = that.files[0].name;

				var regexp = /[^\.]+(\.xls|\.xlsx)$/i;
				//扩展名是.xls或者.xlsx
				if (that.uploadFileName.match(regexp)) {
					that.changeIndex(); //读取sheet数据
				} else {
					console.log("导入文件格式不对，请导入 .xls或 .xlsx 文件");
					that.promptMsg.push("导入文件格式不对，请导入 .xls或 .xlsx 文件");
				}
			},
			delFile() {
				var importInput = document.getElementById('import');
				if (importInput.value != '') {
					importInput.value = '';
					this.promptMsg = [];
				}
			},
			changeIndex() {
				var that = this;
				that.initData();

				var fileReader = new FileReader();
				fileReader.onload = function(event) {
					var data = event.target.result;
					var dataOpt = {
						type: "array"
					};
					var workBook = XLSX.read(data, dataOpt);
					// workbook.SheetNames 是工作簿内工作表的有序列表。
					if (!Number(that.sheetIndex)) {
						that.promptMsg.push("罐号输入错误!");
					} else if (that.sheetIndex > workBook.SheetNames.length) {
						that.promptMsg.push("第 " + that.sheetIndex + " 个罐表不存在");
					} else {
						var sheet1 = workBook.SheetNames[that.sheetIndex - 1]; //取这个工作簿的第一张表的名字
						// wb.Sheets[sheetname] 返回一个表示工作表的对象。
						that.allData = XLSX.utils.sheet_to_json(workBook.Sheets[sheet1], {
							header: 1
						});
						that.tableArray = that.allData.slice(2); //我们需要的二维数组
						that.tankMeterPoints = that.allData[0][1]; //罐表点数
						if (that.tankMeterPoints == 0) {
							console.log("罐表点数不能为 0 !");
							that.promptMsg.push("罐表点数不能为 0 ");
						} else if (!Number(that.tankMeterPoints)) {
							console.log("罐表点数不是数字");
							that.promptMsg.push("罐表点数不是数字");
						} else {
							that.dealData();
						}
					}
				}
				fileReader.readAsArrayBuffer(that.files[0]);
			},
			dealData() {
				var that = this;
				if (that.tankMeterPoints <= that.tableArray.length) {
					for (let i = 0; i < that.tankMeterPoints; i++) {
						for (let j = 0; j < 2; j++) {
							if (!that.tableArray[i][j]) { //1. 检查有无空白cell
								console.log("第", i + 3, "行、第", j + 1, "列数据不存在");
								that.promptMsg.push("第 " + (i + 3) + " 行、第 " + (j + 1) + " 列数据不存在（或者为 0 ）");
							} else if (!Number(that.tableArray[i][j])) { //2. 检查有无非数字
								console.log("第", i + 3, "行、第", j + 1, "列数据不是数字");
								that.promptMsg.push("第 " + (i + 3) + " 行、第 " + (j + 1) + " 列数据不是数字");
							} else if (i > 0 && j > 0) { //3. 检查数组是否递增
								//3.1 检查高度是否递增
								that.D_valueH = that.tableArray[i][0] - that.tableArray[i - 1][0];
								//3.2 检查体积是否递增
								that.D_valueV = that.tableArray[i][1] - that.tableArray[i - 1][1];
								if (Math.round(that.D_valueH) <= 0) {
									console.log("第", i + 3, "行高度不是递增");
									that.promptMsg.push("第 " + (i + 3) + " 行高度不是递增");
								} else if (Math.round(that.D_valueV) <= 0) {
									console.log("第", i + 3, "行体积不是递增");
									that.promptMsg.push("第 " + (i + 3) + " 行体积不是递增");
								}
							}
						}
					}
					if (that.promptMsg.length == 0) {
						that.promptMsg.push("第 " + that.sheetIndex + " 个罐表无错误");
						this.availableFlag = true;
					} else {
						this.availableFlag = false;
					}
				} else {
					console.log("罐表点数大于实际行数");
					that.promptMsg.push("罐表点数大于实际行数");
				}
			},
			sendToService() {
				if (this.availableFlag) {
					console.log("发送到服务器");
				}
			}
		}
	}
</script>

<style>
	.importFile {
		padding-left: 10px;
		background-color: rgba(85, 170, 255, 0.1);
	}

	#import {
		width: 30%;
		font-size: large;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title>button {
		font-size: large;
		color: red;
		font-weight: 600;
	}

	.title p:last-child {
		width: 38%;
		color: blue;
		font-size: small;
	}

	#sheet {
		width: 22%;
		display: inline-block;
		margin: 5px 5px;
	}

	#sheet input {
		width: 30px;
		text-align: center;
	}

	.prompt {
		width: 33%;
		display: inline-block;
		color: indianred;
		font-size: small;
	}
</style>
